<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path ;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
    <script src="liss/js/jquery.form.js"></script>
    <script src="liss/js/myjs.js"></script>
    <!--
    <script src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.js"></script>
    -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function ajaxTest(){
            $.ajax({
                data:{name:$("#name").val()},
                type:"GET",
                dataType: 'JSON',
                url:"/webssm/showUser",
                error:function(data){
                    alert("出错了！！:"+data.msg);
                },
                success:function(data){
                    alert("success:"+data.msg);
                    $("#result").html(data.msg) ;
                }
            });
        }
    </script>
    <script>
        function uploadPic() {
            // 上传设置
            var options = {
                // 规定把请求发送到那个URL
                url: "<%=basePath%>/upload/uploadPic",
                // 请求方式
                type: "post",
                // 服务器响应的数据类型
                dataType: "json",

                async: false,
                // 请求成功时执行的回调函数
                success: function(data, status, xhr) {
                    // 图片显示地址
                    alert('图片加载成功！');
                    $("#allUrl").attr("src", data.path);
                }
            };
            $("#jvForm").ajaxSubmit(options);
        }
    </script>
    <script type="text/css">
        .div1{
            max-width:100%;

            height:auto;
        }
       img{
            width:300px;
            height:100px
        }
        .div2{
            width: auto;
            height: auto;
            max-width: 100%;
        }
    </script>

</head>
<body onload="liss();">
<form id="jvForm"  method="post" enctype="multipart/form-data">
    <table>
        <tbody>
        <tr>
            <td>
            <div class="div2">
                <div id="div1" class="div1">
                <img  id="allUrl"/>
                </div>
            </div>
            </td>
            <td>
                <!-- 在选择图片的时候添加事件，触发Ajax异步上传 -->
                <input name="pic" type="file" />
                <input type="button" onclick="uploadPic();" value="上传">
            </td>
        </tr>
        </tbody>
    </table>
</form>
<div id="result"></div>
</body>
</html>